<div class="content">
  <div class="search-bar">
    <nz-select [(ngModel)]="selectedPlaceType" (ngModelChange)="getPlace()">
      <nz-option [nzValue]="item" [nzLabel]="item.name" *ngFor="let item of placeTypeList"></nz-option>
    </nz-select>
    <nz-select [(ngModel)]="selectedPlace" (ngModelChange)="getPlaceInfo()">
      <nz-option [nzValue]="item" [nzLabel]="item.name" *ngFor="let item of placeList"></nz-option>
    </nz-select>

    <div class="spacer"></div>
    <span>未使用时间</span>
    <nz-range-picker [(ngModel)]="initDate" (ngModelChange)="onInitDateChange($event)" [nzShowTime]="true"
      class="margin-l"></nz-range-picker>
  </div>

  <div class="card" *ngIf="selectedPlace">
    <div class="header">
      <div class="txt-item">
        <span>所选场地：</span>
        {{selectedPlaceType?.name | ellipsis: 16:'...' }} > {{selectedPlace?.name | ellipsis: 16:'...'}}
      </div>
      <div class="txt-item" *ngIf="useMode">
        <span>使用用途：</span>
        {{useMode}}
      </div>
      <div class="txt-item" *ngIf="useNote">
        <span>使用事项：</span>
        {{useNote}}
      </div>
    </div>
    <div class="body">
      <div class="alter-msg">
        <i class="iconfont icon-information-line"></i>
        如当前功能室选择的时间被占用，则无法完成提交。
      </div>

      <div class="action-panel">
        <span>确定所选场地使用时间</span>
        <nz-range-picker [nzShowTime]="true" class="margin-l" [(ngModel)]="selectedDate"></nz-range-picker>
        <button nz-button nzType="primary" (click)="submitPlaceUseLog()">
          确定
        </button>
      </div>

      <zepride-place-use-axis></zepride-place-use-axis>
    </div>
  </div>

  <div class="card" *ngIf="selectedPlace">
    <div class="header bule-bg">
      选择结果
    </div>
    <div class="body">
      <div nz-row>
        <div nz-col nzSpan="12" *ngFor="let item of resultPlaceUseLogList">
          <div class="selected-place-item">
            <span>{{item.placeTypeName | ellipsis : 4 : '...'}}</span>
            <div class="spacer"></div>
            <div class="place-item">
              <span>{{item.placeName | ellipsis: 4:''}}</span>
              <span>
                {{item.beginTime | date:'yyyy-MM-dd HH:mm'}}
                ~
                {{item.endTime | date:'yyyy-MM-dd HH:mm'}}</span>
              <a nz-button nzType="link" (click)="delPlaceUseLog(item)">
                <i class="iconfont icon-close-circle-line"></i>
              </a>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<nz-divider></nz-divider>
<div class="floor">
  <button nz-button nzType="default" (click)="cancel()">取消</button>
  <button nz-button nzType="primary" (click)="ok()">确定</button>
</div>
